import React, { useState, useEffect } from 'react'

export default function Mouse () {
  const [position, setPosition] = useState({ x: 0, y: 0 })

  useEffect(() => {
    const move = e => {
      setPosition({
        x: e.clientX,
        y: e.clientY
      })
    }

    window.addEventListener('mousemove', move)

    return () => {
      window.removeEventListener('mousemove', move)
    }
  }, [])

  return (
    <div>
      Mouse
      <p>
        position is {position.x},{position.y}
      </p>
    </div>
  )
}
